<template>
 <div class="home" :style="{height: homeHeight + 'px'}">
    <div class="tip">
      <p>ID: {{userInfo.id}}</p>
      <p>我的余额：<em>{{userInfo.sum}}</em></p>
    </div>
    <div class="boardBox">
      <div class="spinner" v-if="load">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      <div class="warp">
      	
      <div class="board board-top" id="board">
        <p v-for="item in record">恭喜玩家{{item.member_id}}赢得{{item.sum}}金币红包</p>
      </div>
      </div>
    </div>
    <router-link to="/page3" class="btn ruleBtn"></router-link>
    <router-link to="/page4" class="btn comBtn"></router-link>
    <div class="redPocket">
      <div class="pockBox">
        <div class="pocket" :class="item.clsIndex" v-for="(item,index) in redpacketItem" :disabled="disable" v-show="index==0" @click="jump(index)">
            <button>抢红包&gt;</button>
            <p>抢{{item.range}}金币</p>
        </div>
      </div>
      <div class="pockBox">
        <div class="pocket" :class="item.clsIndex" v-for="(item,index) in redpacketItem" :disabled="disable" v-show="index>=1&&index<=3" @click="jump(index)">
            <button>抢红包&gt;</button>
            <p>抢{{item.range}}金币</p>
        </div>
      </div>
      <div class="pockBox">
        <div class="pocket" :class="item.clsIndex" v-for="(item,index) in redpacketItem"  :disabled="disable" v-show="index>3" @click="jump(index)">
            <button>抢红包&gt;</button>
            <p>抢{{item.range}}金币</p>
        </div>
      </div>
    </div>
    <bottom-nav act="open"></bottom-nav>
  </div>
</template>

<script>
	import bottomNav from './bottomNav'
	import { MessageBox } from 'mint-ui'
  import router from "../router"
	export default {
		name: 'home',
		data () {
			return {
				homeHeight: 0,
				load:false,
				timer: '',
				redpacketItem:[
					{"range":'1-20',clsIndex:'pocket5'},
					{"range":'1-100',clsIndex:'pocket10'},
					{"range":'5-300',clsIndex:'pocket20'},
					{"range":'10-500',clsIndex:'pocket50'},
					{"range":'20-1000',clsIndex:'pocket100'},
					{"range":'50-2000',clsIndex:'pocket200'},
					{"range":'100-5000',clsIndex:'pocket500'}
				],
				record:'',
				page:1,
				userInfo:'',
				openid:'',
				disable:false
			}
		},
		components: {bottomNav},
		mounted () {
			//模糊查询
			function GetQueryString(name)
			{
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null)return  unescape(r[2]); return null;
			}
			let that = this;
			that.openid = 'obj8zs1IdUy8DE6a8j0C1eiQIQUQ';
			//微信授权
			// var code = GetQueryString("code")
			// var url  = "http://xyydj.daoapp.io/wechat/callback?code=" + code;
			// if(!code){
			// 	this.axios({
			// 	 method:'get',
			// 	 url:url
			// 	}).then(function(res){
			// 		if(res.status_code == 200){
			// 			// console.log(res.data)
			// 			var openid = res.data;
			// 			that.openid = openid;
			// 			window.localStorage.setItem("openid",openid);
			// 		}
			// 	}).then(function(openid){
			// 		that.axios({
			// 			url:'http://xyydj.daoapp.io/mobile/wechat/member/openi' + openid
			// 		}).then(function(res){
			// 			// console.log(res);			
			// 			if(res.status_code == 200){
			// 				console.log(res);
			// 				let userInfo = res.data.data;
			// 				that.userInfo = userInfo;
			// 				window.localStorage.setItem("userInfo",JSON.stringify(userInfo));
			// 			}
			// 		})
			// 	})
			// }
			this.requestRed();
            //设置用户数据
            this.axios({
				method:"get",
				url: "http://xyydj.daoapp.io/mobile/member?openid=" + that.openid,
			}).then(function(res){
				let userInfo = res.data.data;
				that.userInfo = userInfo;
				window.localStorage.setItem("userInfo",JSON.stringify(userInfo));
			})


			//设置一直添加红包刷屏
			var averageRed = setInterval(() => {
				that.pushRed();
			},5000)
		},
		created() {
			this.init();
		},
		methods: {
			init () {
				this.homeHeight = (document.documentElement.clientHeight - document.documentElement.clientHeight/750*4.9*10);
			},
			//请求红包
			requestRed(){
				var that = this ;
				if(that.page == 1){this.load = true}
				this.load = true;
				this.axios({
				method:"post",
				url: "http://xyydj.daoapp.io/mobile/forrecord/list",
				data: {
					"openid":that.openid,
					"pageLength":15,
					"current_page":that.page,
					"conditions":{
						"type":1
					}
				}}).then(function(res){
				that.record = res.data.data.data;
				that.load = false
				})
			},
			// 增加
			pushRed (){
				var that = this;
				this.axios({
				method:"post",
				url: "http://xyydj.daoapp.io/mobile/forrecord/list",
				data: {
					"openid":that.openid,
					"pageLength":15,
					"current_page":that.page++,
					"conditions":{
						"type":1
					}
				}}).then(function(res){
				that.record.push(res.data.data.data);
			})
			},
			//跳转
			jump(index){
				var that = this;
				that.disable = true;
				clearInterval(that.averageRed);
				//拆红包
				this.axios({
					 method:'post',
					 url:"http://xyydj.daoapp.io/mobile/redpacket/list",
					 data:{
						 "openid":that.userInfo.openid,
						 "spieltag":index
					 }
				}).then(function(res){
						that.disable = false;
						if(res.status_code == 301){
							alert("支付不成功")
						}else{
							//跳转页面拆红包
							router.push({
								name:"page1",
								params:{redIndex:index}
							})
						}
				})
		}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.home {
  padding-top: 8.5rem;
  position: relative;
  background: #841208 url(../assets/img/bg1.jpg) center 0 no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
}

.tip {
  position: fixed;
  left: 0;
  top: 0;
  padding: 0 1rem;
  display: -webkit-box;
  -webkit-box-pack: justify;
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 2.9rem;
  line-height: 2.9rem;
  box-sizing: border-box;
}

.tip p {
  font-size: 1.3rem;
  color: #fff;
}

.tip p em {
  color: #ef312a;
}

.boardBox {
  position: relative;
  margin: 0 auto;
  width: 20rem;
  height: 9.5rem;
  overflow: hidden;
}

.board {
  position: absolute;
  top: 0;
  left: 0;
}

.board p {
  font-size: 1.3rem;
  color: #fae978;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.btn {
  position: absolute;
  top: 26rem;
  height: 2.95rem;
}

.ruleBtn {
  display: block;
  left: 0;
  background: url(../assets/img/ruleBtn.png) center no-repeat;
  background-size: 7.4rem auto;
  width: 7.4rem;
}

.comBtn {
  display: block;
  right: 0;
  background: url(../assets/img/commentBtn.png) center no-repeat;
  background-size: 5.5rem auto;
  width: 5.5rem;
}

.redPocket {
  padding: 0 2.5rem;
  padding-top: 1.5rem;
  width: 100%;
  height: 34rem;
  box-sizing: border-box;
}

.pockBox {
  margin-top: 1.5rem;
  display: -webkit-box;
  -webkit-box-pack: justify;
  -webkit-box-align: center;
}

.pockBox:first-child {
  -webkit-box-pack: center;
}

.pockBox .pocket {
  padding-top: 3.5rem;
  width: 8.9rem;
  height: 8.9rem;
  border-radius: 12px;
  text-align: center;
  box-sizing: border-box;
}

.pockBox .pocket5 {
  background: url(../assets/img/5redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket10 {
  background: url(../assets/img/10redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket20 {
  background: url(../assets/img/20redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket50 {
  background: url(../assets/img/50redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket100 {
  background: url(../assets/img/100redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket200 {
  background: url(../assets/img/200redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket500 {
  background: url(../assets/img/500redBag.png) 0 0 no-repeat;
  background-size: 8.9rem;
}

.pockBox .pocket button {
  display: inline-block;
  padding: 0 .5rem;
  border-radius: 1rem;
  background: #fae978;
  border: none;
  font-size: 1.2rem;
  color: #ef2525;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
}

.pockBox .pocket p {
  margin-top: 1rem;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
}

.db-marqueeBox {
  position: relative;
}

.spinner {
  margin: 0 auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #ef4f4f;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

			.warp{
				height: 126px;
				overflow: hidden;
			}
     .board-top{height:800px;overflow: hidden;position: absolute;top:0;left: 20px;width: 100%}
      .board-top{
        position: absolute;
      }
      @-webkit-keyframes anim1{
        0% {top: 0;}
        100%{top:-15rem;}
      }

      .board-top{
        -webkit-animation: anim1 4s linear infinite;
      }
</style>
